<!-- 保障期列表 -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :span="12">
              <a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="保障期类型" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.indemnifyType) === 1">终身</el-tag>
            <el-tag v-if="parseInt(scope.row.indemnifyType) === 2">保至{{scope.row.indemnifyValue}}岁</el-tag>
            <el-tag v-if="parseInt(scope.row.indemnifyType) === 3">保障{{scope.row.indemnifyValue}}年</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="排序号" prop="sortOrder" align="center" />
        <el-table-column label="创建时间" prop="createTime" align="center" />
        <el-table-column label="更新时间" prop="updateTime" align="center" />
        <el-table-column width="300" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
            
            <el-link :underline="false" type="primary" style="margin-left:10px;"
              @click="openDutySeriousMust(scope.row)">保险责任</el-link>
              
            <el-link :underline="false" type="primary" style="margin-left:10px;"
              @click="openPay(scope.row)">缴费期限</el-link>
            <el-link :underline="false" type="danger" style="margin-left:10px;"
              @click="handleDelete(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
        <el-pagination :current-page="queryParam.page" :page-size="queryParam.limit" :page-sizes="[10, 20, 50, 100]"
          :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑 -->
    <indemnify-list-edit :modal="modal" @done="handleOk" />

    <!-- 重疾-必选责任 -->
    <duty-serious-must-list :productId="productId" :productIndemnifyId="modal.productIndemnifyId" :mdl="modal"
      @done="handleOk" />

    <!-- 缴费期限 -->
    <indemnify-pay-list :productId="productId" :productIndemnifyId="modal.productIndemnifyId" :mdl="modal"
      @done="handleOk" />

  </div>
</template>

<script>
  import { listByPage, deleteIndemnify } from '@/api/aibao/product/indemnify'
  import indemnifyListEdit from './components/indemnify-list-edit'
  import dutySeriousMustList from '../product-duty-serious-must/indemnify-duty-serious-must-list'
  import indemnifyPayList from '../indemnify-pay/indemnify-pay-list'

  export default {
    props: {
      productId: {
        type: String,
        default: ''
      }
    },
    components: {
      indemnifyListEdit,
      dutySeriousMustList,
      indemnifyPayList
    },
    data() {
      return {
        queryParam: {
          page: 1,
          limit: 10,
          productId: ''
        },
        total: 0,
        modal: {
          visible: false, //新增、编辑
          visibleDutySeriousMust: false, //重疾必选责任
          visibleIndemnifyPay: false, //保障期-缴费期限
          productIndemnifyId: '', //保障期id
          title: '',
          form: {}
        },
        tableData: [],
      }
    },
    created() {
      this.queryParam.productId = this.productId
      this.getTable()
    },
    methods: {
      query() {
        this.queryParam.page = 1
        this.getTable()
      },
      handleSizeChange(val) {
        this.queryParam.limit = val
        this.getTable()
      },
      handleCurrentChange(val) {
        this.queryParam.page = val
        this.getTable()
      },

      getTable() {
        this.queryParam.productId = this.productId
        listByPage(this.queryParam).then(res => {
          this.tableData = res.data.records
          this.total = parseInt(res.data.total)
        }).catch(() => {})
      },

      handleOk() {
        this.modal.form = {}
        this.modal.visible = false
        this.modal.visibleDutySeriousMust = false
        this.modal.visibleIndemnifyPay = false
        this.queryParam.page = 1
        this.getTable()
      },

      handleAdd() {
        this.modal.form = {
          productId: this.productId,
          id: '',
          indemnifyType: 1,
          indemnifyValue: 0,
          sortOrder: 1,
        }
        this.modal.visible = true
        this.modal.title = '新增'
      },

      handleEdit(record) {
        this.modal.form = {
          productId: this.productId,
          id: record.id,
          indemnifyType: record.indemnifyType,
          indemnifyValue: record.indemnifyValue,
          sortOrder: record.sortOrder,
        }
        this.modal.visible = true
        this.modal.title = '编辑'
      },
      handleDelete(record) {
        // 删除，2025年1月18日17:17:04
        deleteIndemnify([record.id]).then(res => {
          this.queryParam.page = 1
          this.getTable()
          this.$message.success('删除成功')
        }).catch(() => {})
      },

      // 打开-重疾必选责任
      openDutySeriousMust(record) {
        this.modal.productIndemnifyId = record.id
        this.modal.visibleDutySeriousMust = true
        this.modal.title = '保险责任'
      },

      // 打开-缴费期限
      openPay(record) {
        this.modal.productIndemnifyId = record.id
        this.modal.visibleIndemnifyPay = true
        this.modal.title = '缴费期限'
      },
    }
  }
</script>

<style lang="less" scoped>
  .view-video {
    position: relative;

    .close {
      position: absolute;
      right: 15px;
      top: 0;
      cursor: pointer;
    }
  }

  /deep/.ant-modal-body {
    max-height: calc(80vh - 150px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #e3e3e6;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
  }
</style>